<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fileChange(){
            var reader = new FileReader();//定义文件读取流对象
            reader.readAsDataURL(document.getElementById("myFile").files[0]);
            reader.onload = function (ev) {
                document.getElementById("faceImg").src = ev.target.result;
            }
        }
    </script>
</head>
<body>
<!--enctype="multipart/form-data ：设置请求头，上传数据的格式为二进制格式。不加这句话只能上传文本格式-->
    <form action="/user/add" method="post" enctype="multipart/form-data">
        用户名：<input type="text" name="userName"><br>
        生日:<input type="text" name="birthday"><br>
        <img src="" width="500px" height="400px" style="border: 1px solid #000" id="faceImg">
<!--    name="myFile" 必须和属性名不一样   -->
        头像：<input type="file" name="myFile" id="myFile" onchange="fileChange()"><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>